{namespace wizard}
/**
 * Generates a preview of the wizard's output.
 * To compile the template-generating code, run 
 * java -jar SoyToJsSrcCompiler.jar --outputPathFormat template.js template.soy
 * @param mapCode The code to set up the map.
 * @param markerCollections The collections of markers to add to the map.
 * @param height The height of the map div.
 * @param width The width of the map div.
 * @param misc Miscellaneous feature flags
 */
{template .preview}
{literal}<!DOCTYPE html>
<html> 
<head> 
<title>Generated Using the Google Maps API Wizard</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var map;
var infoWindow;
var markers = [];
{/literal}

{literal}
/**
 * Adds a marker to the map with the given options.  If content is
 * specified, an Info Window will display this content when the
 * user clicks the marker.
 * @param {google.maps.MarkerOptions} options
 * @param {?string} content
 */
function addMarker(options, infoWindowContent) {
  var marker = new google.maps.Marker(options);
  marker.setMap(map);
  markers.push(marker);
  if (infoWindowContent) {
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(infoWindowContent);
      infoWindow.open(map, marker);
    });
  }
{/literal}{if $misc.dblclickToRemoveMarker}{literal}
  google.maps.event.addListenerOnce(marker, 'dblclick', function() {
    marker.setMap(null);
    google.maps.event.clearInstanceListeners(marker);
    // Finds the marker in the marker array and removes it from the map and the
    // markers array.
    for (var i = 0; i < markers.length; ++i) {
      if (markers[i] == marker) {
        markers.splice(i, 1);
        break;
      }
    }
  });
{/literal}{/if}{literal}
  return marker;
}
{/literal}
{if $markerCollections}
{if $misc.checkboxes}{literal}
function addCheckbox(markerCollection) {
  var container = document.getElementById('checkboxes');
  var label = document.createElement('label');
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.checked = true;
  label.innerHTML = markerCollection.name;
  label.appendChild(checkbox);
  container.appendChild(label);

  google.maps.event.addDomListener(checkbox, 'change', function() {
    setMap(markerCollection, checkbox.checked ? map : null);
  });
}

function setMap(markerCollection, map) {
  var markers = markerCollection.gMarkers;
  for (var i = 0; i < markers.length; ++i) {
    markers[i].setMap(map);
  }
}
{/literal}{/if}
{/if}

{if $markerCollections}{literal}
// An array of marker collection and marker specifications.  Each collection
// has its own set of options that are shared for all of its markers.
var markerCollections = {/literal}{$markerCollections|noAutoescape}{literal};
{/literal}{/if}

{literal}
google.maps.event.addDomListener(window, 'load', function() {
{/literal}
  {$mapCode|noAutoescape}
{literal}
  infoWindow = new google.maps.InfoWindow();
{/literal}
{if $markerCollections}
{literal}
  // Initializes the markers in each collection, each with the common set of
  // options and the individual title, position, and content to display in an
  // Info Window.
  for (var i = 0; i < markerCollections.length; ++i) {
    markerCollections[i].gMarkers = [];
{/literal}
{if $misc.checkboxes}{literal}
    addCheckbox(markerCollections[i]);
{/literal}
{/if}
{literal}
    var options = markerCollections[i].options;
    for (var j = 0; j < markerCollections[i].markers.length; ++j) {
      var markerSpec = markerCollections[i].markers[j];
      // Overwrites the title and position from previous iterations so that each
      // marker has its own title and position.
      options.title = markerSpec.title;
      options.position = markerSpec.position;
      var marker = addMarker(options, markerSpec.content);
      markerCollections[i].gMarkers.push(marker);
    }
  }
{/literal}{/if}
{if $misc.clickToAddMarker}{literal}
  google.maps.event.addListener(map, 'click', function(e) {
    addMarker({position: e.latLng}, null);
  });
{/literal}{/if}
{if $misc.drawPolygon}{literal}
  var path = new google.maps.MVCArray;
  var polygon;

  google.maps.event.addListener(map, 'click', function(e) {
    path.push(e.latLng);
    if (path.getLength() == 3) {
      polygon = new google.maps.Polygon({
        paths: path,
        fillColor: '#00aaff',
        strokeColor: '#00aaff',
        map: map
      });
    }
  });
{/literal}{/if}
{if $misc.geolocation}{literal}
  // Initial viewport geolocation
  if (window.navigator && navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
      var loc = new google.maps.LatLng(
        pos.coords.latitude, pos.coords.longitude);

      new google.maps.Circle({
        map: map,
        center: loc,
        radius: pos.coords.accuracy,
        strokeColor: '#0000ff',
        fillColor: '#0000ff'
      });
    }, null, { maximumAge: 60 * 1000, timeout: 10 * 1000 });
  }
{/literal}{/if}
{if $misc.geocode}{literal}
  // Geocoder
  var geocoder = new google.maps.Geocoder;

  var handleGeocodeResponse = function(result, status) {
    if (status !== google.maps.GeocoderStatus.OK) {
      // geocoding failed, show an error message.
      alert("Geocoding failed: " + status);
    } else {
      map.fitBounds(result[0].geometry.viewport);
    }
  };

  google.maps.event.addDomListener(document.getElementById('geocode'), 'submit',
      function(submitEvent) {
        var address = document.getElementById('location').value;
        console.log(address);
        if (address) {
          // issue geocoding request
          geocoder.geocode({
            address: address,
            bounds: map.getBounds()
          }, handleGeocodeResponse);
        }
        submitEvent.preventDefault && submitEvent.preventDefault();
        return false;
      });
{/literal}{/if}
{literal}});{/literal}

{literal}
</script> 
</head> 
<body>
  {/literal}<div id="map-canvas" style="width: {$width}px; height: {$height}px;">{literal}
  </div> 
  {/literal}{if $misc.geocode}{literal}
  <form id="geocode">
    <input id="location"><input type="submit" value="Geocode &rarr;">
  </form>
  {/literal}{/if}{literal}
  {/literal}{if $misc.checkboxes}{literal}
  <div id="checkboxes"></div>
  {/literal}{/if}{literal}
</body> 
</html>
{/literal}
{/template}
